<template>
	<view class="cart_box" v-if="buffer">
		<view class="cart_head">
			<view class="cart_menu">
				<text>全部({{cartList.length}})</text>
				<text>降价({{cartList.length}})</text>
				<text>常卖</text>
				<text>分类</text>
			</view>
			<view class="cart_ticket">
				<!-- 此处使用checkbox是因为支付宝switch没有checkbox类型 -->
				<!-- <switch type="checkbox" :checked="true" color="#ff6040"  /> -->
				<checkbox color="#FF6040" value="true" :checked="allCheck" />
				<text class="cart_ticket_text1">小U自营</text>
				<text class="cart_ticket_text2">以免运费 |</text>
				<text class="cart_ticket_text3">领券</text>
			</view>
		</view>

		<view class="container">
			<view class="top">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" v-for="(item,index) in cartList"
					:key="index">
					<view class="cartInfo" id="demo1">
						<!-- 明日来写购物车基本信息 -->
						<view class="cartInfochild">
							<!-- 选择框 -->
							<view class="cartInfo_switch common">
								<!-- 点击当前商品 -->
								<checkbox-group>
									<checkbox color="#FF6040" :checked="item.status" value="1"
										@click="checkOne(index)" />
								</checkbox-group>

								<!-- <switch type="checkbox" :checked="true"  color="#ff6040" /> -->
							</view>
							<!-- 图片 -->
							<view class="cartInfo_image common">
								<image :src="item.img" mode="widthFix"></image>
							</view>

							<!-- 信息 -->
							<view class="cartInfo_info">
								<label style="font-size: 32rpx;">{{item.goodsname}}</label>
								<label style="font-size: 24rpx; color: #ccc;">规格：不错的商品</label>
								<label style="font-size: 20rpx; color: #FF6040;">比加入降低￥100</label>
								<label style="color:#FF6040;">￥
									<text style="font-size: 40rpx;color:#FF6040;">{{item.price}}
									</text> <text>￥{{item.price+100}}</text>
								</label>
							</view>
							<!-- 加减数量 -->
							<view class="cartInfo_num">
								<view class="cartInfo_num_child">
									<label @click="pre(index)">－</label>
									<label>{{item.num}}</label>
									<label @click="add(index)">＋</label>
								</view>
							</view>
						</view>

					</view>
					<view class="cartDel" id="demo2">
						<label for="" @click="del(index)">删除</label>
					</view>
				</scroll-view>
			</view>

			<!-- 底部 -->
			<view class="foot">
				<view class="footd1">
					<checkbox-group>
						<checkbox color="#FF6040" value="1" :checked="allCheck" @click="checkAll()" />
					</checkbox-group>
					<!-- <switch type="checkbox" :checked="true" color="#ff6040" /> -->
					<label>全选</label>
				</view>
				<view class="footd2">
					<view class="footd2sp1">合计：<label style="color: #FF6040;">￥ {{all.countMoney}}</label></view>
					<label class="footd2sp2">不含运费，已优惠￥{{all.countNum*100}}</label>
				</view>
				<!-- 跳到提交订单，结算页面 -->
				<view class="footd3" hover-class="touchOpacity">
					<!-- 被选中的商品的个数 -->
					<label @click="goOrder()">去结算({{all.countNum}}件)</label>
				</view>
			</view>

		</view>
	</view>
	<!-- 无数据提示 -->
	<view v-else>
		<cartnull />
	</view>
</template>

<script>
	// 引入数据为空提示组件
	import cartnull from '@/components/cartnull/cartnull.vue';
	export default {
		components: {
			cartnull
		},
		data() {
			return {
				cartList: [], //初始化购物车数据
				buffer: true, //检测购物车是否有数据
				allCheck: true
			}
		},
		// 页面显示时
		onShow() {
			//检测用户是否登录过
			let userInfo = this.$tool.isLogin()
			if (userInfo) {
				this.$http({
					url: 'cartlist',
					data: {
						uid: userInfo.uid
					}
				}).then(res => {
					console.log(res);
					this.cartList = res.list
					this.cartList.forEach(item => {
						item.img = this.$URL + item.img
						item.status = true
					})
				})
			}
		},
		computed: {
			//计算总数量和总金额
			all() {
				let countNum = 0;
				let countMoney = 0;
				let cartCount = 0;
				this.cartList.forEach(item => {
					if (item.status) {
						countNum += parseInt(item.num)
						countMoney += parseInt(item.num) * parseFloat(item.price)
					}
					cartCount += 1
				})
				//给底部导航栏购物车设置角标
				if (cartCount > 0) {
					uni.setTabBarBadge({
						index: 2,
						text: cartCount.toString()
					})
				} else {
					uni.removeTabBarBadge({
						index: 2
					})
				}
				return {
					countMoney,
					countNum
				}
			}
		},
		methods: {
			//数量减一
			pre(index) {
				this.cartList[index].num--
				//限制最小值
				this.cartList[index].num = Math.max(this.cartList[index].num, 1)
				this.$http({
					url: 'cartedit',
					method: 'post',
					data: {
						id: this.cartList[index].id,
						type: 1
					}
				}).then(res => {
					console.log(res);
				})
			},
			//数量加一
			add(index) {
				this.cartList[index].num++
				this.$http({
					url: 'cartedit',
					method: 'post',
					data: {
						id: this.cartList[index].id,
						type: 2
					}
				}).then(res => {
					console.log(res);
				})
			},
			//删除商品
			del(index) {
				this.$http({
					url: 'cartdelete',
					method: 'post',
					data: {
						id: this.cartList[index].id
					}
				}).then(res => {
					this.$tool.tip('删除成功', 'success')
					if (this.cartList.length == 0) {
						this.buffer = false
					}
				})
				this.cartList.splice(index, 1)
				//删除之后判断是否全选
				let flag = this.cartList.every(item => {
					return item.status == true
				})
				this.allCheck = flag
			},
			//单选
			checkOne(index) {
				this.cartList[index].status = !this.cartList[index].status
				// console.log(this.cartList[index].status);
				let flag = this.cartList.every(item => {
					return item.status == true
				})
				this.allCheck = flag
			},
			//全选
			checkAll() {
				this.allCheck = !this.allCheck
				console.log(this.allCheck);
				this.cartList.forEach(item => item.status = this.allCheck)
			},
			//跳转到订单页
			goOrder() {
				// 1.组装需要确认的订单数据
				let orderConfirm = [];
				this.cartList.forEach(item => {
					if (item.status) {
						orderConfirm.push(item)
					}
				})

				// 2.检测是否选中购买的商品数据
				if (orderConfirm.length == 0) {
					this.$tool.tip('请先选择要购买的商品！')
					return;
				}

				// 3.跳转到订单确认页面 缓存待确认订单数据(订单详情 支付金额 购买数量)
				uni.setStorageSync('orders', {
					orderConfirm,
					...this.jisuan
				})
				uni.navigateTo({
					url: "../order/order"
				})
			}
		}
	}
</script>

<style scoped>
	/* 引入样式文件 */
	@import url("@/static/css/cart.css");
</style>
